let startData = {
    banks: [
        { name: '成都银行', id: 'cd' },
        { name: '工商银行', id: 'gs' },
        { name: '交通银行', id: 'jt' },
        { name: '建设银行', id: 'js' },
        { name: '邮政银行', id: 'yz' },
    ],
    year1: {
        cd: 1.981, gs: 1.982, jt: 1.983, js: 1.984, yz: 1.985,
    },
    year2: {
        cd: 2.981, gs: 2.982, jt: 2.983, js: 2.984, yz: 2.985,
    },
    year3: {
        cd: 3.981, gs: 3.982, jt: 3.983, js: 3.984, yz: 3.985,
    },
    year5: {
        cd: 4.981, gs: 4.982, jt: 4.983, js: 4.984, yz: 4.985,
    },
}
const { banks, year1, year2, year3, year5 } = startData
let tbody = document.getElementsByTagName('tbody')[0]

// 深克隆
const deepClone = target => {
    let result
    if(typeof target === 'object'){
        if(Array.isArray(target)) {
            result = []
            for(let i in target) {
                result.push(deepClone(target[i]))
            }
        } else if(target === null) {
            result = target
        } else {
            result = {}
            for(let i in target) {
                result[i] = deepClone(target[i])
            }
        }
    }else {
        result = target
    }
    return result
}

// 循环遍历banks数组，以id为纽带，将下面对象中的数据对应添加到各自数组中
banks.forEach((item, i) => {
    let id = item.id
    let keys = Object.keys(year1)
    keys.map((key, k) => {
        if(id === key) {
            item.year1 = year1[key]
            item.year2 = year2[key]
            item.year3 = year3[key]
            item.year5 = year5[key]
        }
    })
})

// 深克隆一份数据到dealData中
let dealData = deepClone(banks)

// 将多余 id 删除，方便循环生成td
dealData.forEach((item, i) => {
    delete item.id
})
console.log(banks, 'banks');
// console.log(dealData, 'dealData');

// 动态创建tr和td标签
dealData.map((item, i) => {
    let tr = document.createElement('TR')
    tbody.appendChild(tr)
    Object.keys(item).forEach((item1, j) => {
        let td = document.createElement('TD')
        td.innerHTML = item[item1]
        tr.appendChild(td)
    })
})

